import React, { useEffect, useState } from "react";

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

// useEffect就是给函数组件来模拟生命周期的
const App = () => {
  const [count, setCount] = useState(3);
  const [num, setNum] = useState(10);

  // useEffect如果只传了一个参数(回调函数),就相当于componentDidMount和componentDidUpdate
  // useEffect还有第二个参数是一个依赖数组
  // 如果第二个参数是一个空数组，就相当于componentDidMount
  // 如果第二个参数不是空数组，就相当于vue的watch监听
  // 如果在第一个回调函数里面去return一个函数，那么这个函数就会在componentWillUnmount的时候调用

  // useEffect(() => {
  //   console.log(123);
  // });

  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(1);
  //   }, 1000);
  //   return () => {
  //     console.log("组件被销毁了");
  //     clearInterval(timer);
  //   };
  // }, []);

  const [list, setList] = useState([]);
  useEffect(() => {
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     setList(res.result);
    //   });

    // getData().then((res) => {
    //   setList(res.result);
    // });

    // 如果说请求做了封装，又想使用async函数，需要写成函数自执行
    (async () => {
      const res = await getData();
      setList(res.result);
    })();
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <p>num: {num}</p>
      <button onClick={() => setNum((v) => v + 1)}>btn</button>

      <hr />

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
